import React, { useMemo } from "react";
import { useProducts } from "@/business.InterfaceLayer/hooks/store/useQueryStore/useQueryStore";
import useWishlistStore from "@/business.InterfaceLayer/hooks/store/localstorage/useWishlistStore";
import ProductBlockCeil from "@/user.InterfaceLayer/Libraries/UI_KIT/Cells/ProductBlock.ceil";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import styles from "./styled/styles.module.css";
import EmptyBlockWidget from "@/user.InterfaceLayer/Libraries/Widgets/EmptyBlock.widget";
import TextAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom/enum";
import { useTranslation } from "react-i18next";

const Wishlist: React.FC = () => {
  const { t } = useTranslation();

  const { isLoading } = useProducts();
  const { items } = useWishlistStore();

  const renderProducts = useMemo(() => items, [items]);

  if (!isLoading && renderProducts.length === 0) {
    return (
      <div className={globalContainer}>
        <EmptyBlockWidget
          subHead={t("WishListPage.EmptyBLock.subHead")}
          title={t("WishListPage.EmptyBLock.title")}
          subTitle={t("WishListPage.EmptyBLock.subTitle")}
        />
      </div>
    );
  }

  return (
    <div className={globalContainer}>
      <TextAtom
        className="mt-10 mb-6 font-semiBold text-tiffany uppercase"
        type={TextAtomEnum.enum_h1}
      >
        {t("WishListPage.title")}
      </TextAtom>
      <div
        className={`grid 2sm:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 grid-flow-row gap-7 my-4 ${styles.height_rowCustom}`}
      >
        {isLoading
          ? Array.from({ length: 4 }).map((_, index) => (
              <ProductBlockCeil key={index} isLoading={true} />
            ))
          : renderProducts.map((product) => (
              <ProductBlockCeil
                key={product.id}
                id={product.id}
                title={product.title}
                brand={product.brand}
                price={product.price}
                img_paths={product.img_paths}
                colors={product.colors}
              />
            ))}
      </div>
    </div>
  );
};

export default Wishlist;
